<template>
 <div>
        <component :is="loadList[index]" :list="list" 
         :obj="form" :total="total" :num="num"
      ></component>
      <div id="showTableFoot" style="height: 20px;"></div>
 </div>
</template>

<script setup>
import studentReport from './components/studentReport.vue' //學生資料表格
import supplierReport from './components/supplierReport.vue' //學生資料表格
import productReport from './components/productReport.vue'//產品資料表格
import invoiceReport from './components/invoiceReport.vue'//發票資料表格
import gatheringReport from './components/gatheringReport.vue'//收款資料表格
import refundReport from './components/refundReport.vue'//退款資料表格
import invoiceproReport from './components/invoiceproReport.vue'//發票項目表格
import gatheringproReport from './components/gatheringproReport.vue'//收款項目表格
import refundproReport from './components/refundproReport.vue'//收款項目表格
import expenseReport from './components/expenseReport.vue'//支出表格
import warehousingReport from './components/warehousingReport.vue'//庫存量報表
import hintReport from './components/hintReport.vue'//庫存不足報表
import stockcountReport from './components/stockcountReport.vue'//庫存排名報表
import teachReport from './components/teachReport.vue'//導師上課表格


import consumeReport from './assay/consumeReport.vue'//学生消费分析報表
import consumetopReport from './assay/consumetopReport.vue'//学生消费排行報表
import inactivitysReport from './assay/inactivitysReport.vue'//非活跃学生報表
import courseReport from './assay/courseReport.vue'//课程報表
import producttopReport from './assay/productReport.vue'//产品報表
import productgrouptopReport from './assay/productgroupReport.vue'//产品组合報表
import {useRoute} from 'vue-router'

// const loadList = [studentReport, supplierReport,productReport]
const loadList = {studentReport, supplierReport,productReport,
invoiceReport,gatheringReport,refundReport,invoiceproReport,gatheringproReport,
refundproReport,expenseReport,warehousingReport,hintReport,stockcountReport,
consumeReport,consumetopReport,inactivitysReport,courseReport,producttopReport,
productgrouptopReport,teachReport
}
import {ref,reactive,onMounted} from 'vue'
import api from "@/http/service.js";

const route = useRoute()
const index = route.query.index
const url = route.query.url
const list = ref([])
const form = ref({})
const obj = reactive({
  page:1,
  limit:50
})
form.value = Object.assign(JSON.parse(route.query.data),obj)
const total = ref('')
const num = ref('')
const tableList = async()=>{
  const data = await api.post(url,form.value)
  console.log(data);
  if (data.code == 200) {
    list.value = data.data.data
    total.value = data.data.total
    num.value = data.data.num
  }
}
const isLoading= ref(true)
  const scroll= () => {
      let oldTopNum = 0
      // if (!loadList.includes(this.type)) {
      //   return
      // }
      window.onscroll = () => {
        // 变量 scrollTop 是滚动条滚动时, 距离顶部的距离
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 变量 windowHeight 是可视区的高度
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // 变量 scrollHeight 是滚动条的总高度
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        let scroll = scrollTop - oldTopNum;
        oldTopNum = scrollTop
        // 滚动条到底部的条件 (距底部 300px 时触发加载)
        if (
          scrollTop + windowHeight >= scrollHeight - 0 &&
          isLoading.value && scroll > 0
        ) {
          getList()
        }
      }
    }
let timer = ''
    // const timeout = ()=>{
    //   if (isLoading.value) {
    //      timer = setInterval(() => {
    //       getList()
    //   }, 1000);
    //   }else{
    //     clearInterval(timer)
    //   }

    // }
    const getList = async()=>{
      if (!isLoading.value) { return}
      form.value.page +=1
       const data = await api.post(url,form.value)
      if (data.code == 200) {
        if (data.data.data.length>0) {
          isLoading.value = true;
        }else{isLoading.value = false}
    list.value = [...list.value,...data.data.data]
  }
    }
const SubmitForm = ()=>{

}
onMounted(() => {
  tableList()
  scroll()
  // timeout()
})
</script>

<style scoped lang='less'>

</style>